<template>
  <div class="scroller">
    <scroller :on-infinite="infinite" :is-data="ScrollerData.total > page" ref="my_scroller">
      <slot></slot>
    </scroller>
  </div>
</template>
<script>
  import Scroller from 'vue-scroller'
  import { mapGetters } from 'vuex'
  export default {
    name: 'GetData',
    data () {
      return {
        iscroller: true
      }
    },
    props: {
      ScrollerData: {
        type: Object
      },
      config: {
        type: Object,
        default:function () {
          return {}
        }
      },
      type: {
        type: String
      },
      page:{
        type: Number,
        default:10
      }
    },
    watch: {
      'ScrollerData.code' (val) {
        var _this = this
        if (val === '404'){
          _this.iscroller = false
          _this.$parent.isData = true
        } else if(val === '200') {
          _this.$parent.isData = false
        }
      }
    },
    components: {
      Scroller
    },
    mounted () {
      var _this = this
      _this.$nextTick(() => {
        _this.config.id && (_this.$parent[_this.type].id = _this.config.id)
        setTimeout(function () {
          _this.$refs.my_scroller && _this.$refs.my_scroller.resize()
        })
        _this.$emit('on-resize', _this.$refs.my_scroller)
      })
    },
    methods: {
      getData (id) {
        var _this = this
        var config = {
          id: id,
          page: 1,
          callback: function () {
            setTimeout(() => {
              _this.$refs.my_scroller && _this.$refs.my_scroller.resize()
            })
          }
        }
        _this.$store.dispatch(_this.type, config)
      },
      infinite () {
        var _this = this
        if (_this.$parent[_this.type].data.length < _this.page) {
          _this.$refs.my_scroller.finishInfinite(true)
          return
        }
        setTimeout(function () {
          var config = {
            id: _this.config.id,
            page: parseInt(_this.$parent[_this.type].page) + 1,
            callback: function () {
              setTimeout(function () {
                _this.$refs.my_scroller.finishInfinite()
              })
            },
            stopCallback: function () {
              setTimeout(function () {
                _this.$refs.my_scroller.finishInfinite(true)
              })
            }
          }
          _this.$store.dispatch(_this.type, config)
        }, 1500)
      }
    }
  }
</script>
<style lang="scss">

</style>
